<template>
	<div class="content-page">
		<div class="content-nav">
			<el-breadcrumb class="breadcrumb" separator="/">
				<el-breadcrumb-item :to="{ path: '/dashboard' }">首页</el-breadcrumb-item>
				<el-breadcrumb-item>活动管理</el-breadcrumb-item>
				<el-breadcrumb-item>查看上传用户</el-breadcrumb-item>
			</el-breadcrumb>
			<div class="operation-nav">
				<router-link to="/dashboard/game">
					<el-button type="primary" icon="plus">返回列表</el-button>
				</router-link>
			</div>
		</div>
		<div class="content-main">
			<div class="mb20">活动名称 : {{name}}</div>
			<div class="filter-box">
				<el-form :inline="true" :model="filterForm" class="demo-form-inline">
					<el-form-item label="姓名">
						<el-input v-model="filterForm.userName" placeholder="用户姓名"></el-input>
					</el-form-item>
					<el-form-item label="上传日期">
						<el-date-picker v-model="filterForm.start" type="date" placeholder="选择日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
						</el-date-picker>
					</el-form-item>
					<el-button type="primary" @click="onSubmitFun">查询</el-button>
				</el-form>
			</div>
			<div class="form-table-box">
				<el-table ref="multipleTable" :data="tabList[`${activeName}`][`tableData`]" style="width: 100%" border stripe
				 @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="55">
					</el-table-column>
					<el-table-column prop="id" label="ID">
					</el-table-column>
					<el-table-column prop="userName" label="姓名">
					</el-table-column>
					<el-table-column prop="userPhone" label="手机号">
					</el-table-column>
					<el-table-column prop="idNumber" label="身份证">
					</el-table-column>
					<el-table-column prop="uploadTime" label="上传时间">
					</el-table-column>
					<el-table-column label="操作" width="200">
						<template scope="scope">
							<el-button size="small" @click="handleRowEdit(scope.$index, scope.row)">查询</el-button>
							<el-button size="small" type="danger" @click="handleRowDelete(scope.row.id)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="page-box flex">
				<div class="page-box-l">
					<div class="page-box-l">
						<el-button @click="toggleSelection(1)">批量删除</el-button>
						<el-button @click="toggleSelection(2)">取消选择</el-button>
					</div>
				</div>
				<div class="flex-1">
					<el-pagination @current-change="handlePageChange" :current-page="tabList[`${activeName}`][`page`]" :page-size="20"
					 layout="total, prev, pager, next, jumper" :total="tabList[`${activeName}`][`total`]">
					</el-pagination>
				</div>

			</div>
		</div>
		<el-dialog title="详情" :visible.sync="dialogFormVisible" @close="closeDialog">
			<el-form ref="form" :model="form" label-width="80px">
				<el-form-item label="姓名">
					{{form.userName}}
				</el-form-item>
				<el-form-item label="手机号">
					{{form.userPhone}}
				</el-form-item>
				<el-form-item label="身份证">
					{{form.idNumber}}
				</el-form-item>
				<el-form-item label="上传时间">
					{{form.uploadTime}}
				</el-form-item>
				<el-form-item label="上传图片">
					<div class="demo-image__preview_main">
						<div class="demo-image__preview" v-for="item in form.imageList">
							<el-image style="width: 100px; height: 100px" :src="item.imageUrl" :preview-src-list="form.arr">
							</el-image>
						</div>
					</div>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer" v-if="form.status==0">
				<el-button @click="reviewShortFun(2)">驳回</el-button>
				<el-button type="primary" @click="reviewShortFun(1)">通过</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		getActivityUserList,
		delActivityUser,
		reviewShort,
		getActivityUserDetail
	} from '@/api/permission'
	import videoConfig from '@/assets/js/videoConfig'
	console.log(videoConfig)
	export default {
		data() {
			return {
				video_Config: videoConfig,
				activeName: 'first',
				id: null,
				name: null,
				multipleSelection: [],
				filterForm: {
					userName: '',
					start: ''
				},
				tabList: {
					'first': {
						tableData: [],
						page: 0,
						total: null
					},
					'second': {
						tableData: [],
						page: 0,
						total: null,
						status: 0
					},
					'third': {
						tableData: [],
						page: 0,
						total: null,
						status: 1
					},
					'fourth': {
						tableData: [],
						page: 0,
						total: null,
						status: 2
					}
				},
				form: {
					id: '',
					idNumber: '',
					uploadTime: '',
					userName: '',
					userPhone: '',
					arr:[]
				},
				dialogFormVisible: false
			}
		},
		methods: {
			onSubmitFun() {
				let self = this
				let tablist = self.tabList[self.activeName]
				tablist.page = 0
				self.getList(self.filterForm)
			},
			p(s) {
				return s < 10 ? '0' + s : s
			},
			parserDate(d) {
				return d.getFullYear() + '-' + this.p((d.getMonth() + 1)) + '-' + this.p(d.getDate())
			},
			handlePageChange(val) {
				let self = this
				let tablist = self.tabList[self.activeName]
				tablist.page = val -1
				//保存到localStorage
				localStorage.setItem('userPage', this.page)
				localStorage.setItem('userFilterForm', JSON.stringify(this.filterForm));
				this.getList(self.filterForm)
			},
			handleRowEdit(index, row) {
				let self = this
				this.dialogFormVisible = true
				this.video_Config[`sources`][0].src = row.shortUrl
				getActivityUserDetail({
					id: row.id
				}).then(res => {
					let  arr = []
					self.form = res
					res.imageList.forEach(item=>{
						arr.push(item.imageUrl)
					})
					self.form.arr = arr
				})
			},
			handleRowDelete(categoryIdLists) {
				this.$confirm('确定要删除?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					delActivityUser({
						ids: categoryIdLists
					}).then((response) => {
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
						this.onSubmitFilter();
					})
				});
			},
			onSubmitFilter() {
				let self = this
				let tablist = self.tabList[self.activeName]
				tablist = {
					tableData: [],
					page: 0,
					total: null
				}
				this.getList()
			},
			getList(fliter) {
				let self = this
				let tablist = self.tabList[self.activeName]
				let page = tablist.page
				let data = {
					index: page, // 页码
					size: 20,
					activityId: self.id
				}
				typeof fliter != 'undefined' ? Object.assign(data, fliter) : ''
				getActivityUserList(data).then((response) => {
					tablist.tableData = response.content
					tablist.page = response.currentPage + 1
					tablist.total = response.totalRecords
				})
			},
			toggleSelection(type) {
				let rows = this.multipleSelection
				if (type == 1 && rows.length) {
					let categoryIdLists = ''
					rows.forEach(row => {
						if (row) {
							categoryIdLists = categoryIdLists + row.id + ','
						}
					});
					this.handleRowDelete(categoryIdLists)
				} else {
					this.$refs.multipleTable.clearSelection();
				}
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			handleClick(tab, v) {
				let self = this
				let tablist = self.tabList[self.activeName]
				self.onSubmitFilter()
			},
			closeDialog() {
				this.video_Config[`sources`][0].src = ''
			},
			reviewShortFun(type) {
				let self = this
				reviewShort({
					shortId: self.form.shortId,
					reviewResult: type
				}).then(res => {
					let msg = type == 1 ? '视频已通过' : '视频已驳回'
					self.$alert({
						type: 'success',
						message: msg
					})
					self.dialogFormVisible = false
					self.onSubmitFilter()
				})
			}
		},
		components: {

		},
		mounted() {
			let self = this
			if (self.$route.query.id) {
				self.name = self.$route.query.name
				self.id = self.$route.query.id
				this.getList();
			}
		}
	}
</script>

<style>
	.mb20 {
		margin-bottom: 20px;
	}
	.demo-image__preview_main{
		width: 340px;
	}
	.demo-image__preview{
		display: inline-block;
		margin-right: 10px;
		margin-bottom: 10px;
	}
</style>
